<template>
  <div id="up">
    <div class="zdsx">
      <h2>自动上线</h2>
      <el-date-picker clearable v-model="zdsxTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='echarts' style="height: 300px;"></div>
    </div>
    <div class="yrz" >
      <h2>预热罩</h2>
      <el-date-picker clearable v-model="yrzTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='echart' style="height: 300px;"></div>
    </div>
    <div class="fpl">
      <h2>发泡蜡</h2>
      <el-date-picker clearable v-model="fplTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='echar' style="height: 300px;"></div>
    </div>
    <div class="zl">
      <h2>制冷设备</h2>
      <el-date-picker clearable v-model="zlTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='echa' style="height: 300px;"></div>
    </div>
    <div class="lxsx">
      <h2>螺旋上线</h2>
      <el-date-picker clearable v-model="lxsxTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='ech' style="height: 300px;"></div>
    </div>
    <div class="yazo">
      <h2>压柱机一</h2>
      <el-date-picker clearable v-model="yzjATime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='ec' style="height: 300px;"></div>
    </div>
    <div class="yazT">
      <h2>压柱机二</h2>
      <el-date-picker clearable v-model="yzjBTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='one' style="height: 300px;"></div>
    </div>
    <div class="yazT">
      <h2>油化蜡</h2>
      <el-date-picker clearable v-model="yhlTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
       <div ref='two' style="height: 300px;"></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    consumptionzdsx,
    consumptionyrz,
    consumptionfpl,
    consumptionzl,
    consumptionlxsx,
    consumptionyzjA,
    consumptionyzjB,
    consumptionyhl
  } from '@/api/system/consumption.js'
  import axios from 'axios'
  export default {
    data() {
      return {
        loading: false,
        zdsxTime: '',
        yrzTime:'',
        fplTime:'',
        zlTime:'',
        lxsxTime:'',
        yzjATime:'',
        yzjBTime:'',
        yhlTime:''
      }
    },
    mounted() {
      this.getOilList();
      this.getOil();
      this.getList();
      this.get();
      this.oil();
      this.List();
      this.one();
      this.two();
    },
    methods: {
      getOilList() {
        this.loading = true;
        consumptionzdsx(this.zdsxTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.echarts)
          E.setOption(option)
        })

      },
      getOil() {
        this.loading = true;
        consumptionyrz(this.yrzTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.echart)
          E.setOption(option)
        })

      },
      getList() {
        this.loading = true;
        consumptionfpl(this.fplTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.echar)
          E.setOption(option)
        })

      },
      get() {
        this.loading = true;
        consumptionzl(this.zlTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.echa)
          E.setOption(option)
        })

      },
      oil() {
        this.loading = true;
        consumptionlxsx(this.lxsxTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.ech)
          E.setOption(option)
        })

      },
      List() {
        this.loading = true;
        consumptionyzjA(this.yzjATime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.ec)
          E.setOption(option)
        })

      },
      one() {
        this.loading = true;
        consumptionyzjB(this.yzjBTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.one)
          E.setOption(option)
        })

      },
      two() {
        this.loading = true;
        consumptionyhl(this.yhlTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['能耗(KWH)']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '能耗(KWH)',
                data: res.data[0],
                type: 'line'
              },
            ]
          };
          const E = echarts.init(this.$refs.two)
          E.setOption(option)
        })

      },
      handleQuery() {
        this.getOilList();
        this.getOil();
        this.getList();
        this.get();
        this.oil();
        this.List();
        this.one();
        this.two();
        console.log(1111111)
      },
    },
  }
</script>

<style>
  h2{
    font-size: 35px;
    text-align: center;
    color: #0072C6;
  }
</style>
